<template>
	<view class="content">
		<up-search placeholder="请输入搜索文本" v-model="keyword"></up-search>
		<up-swiper v-if="bannerLenGtZero" class="swiperContainer" :list="bannerList" :autoplay="true" keyName="imageUrl"
			radius="8" height="160"  :indicator="true" showTitle="title"></up-swiper>
		<up-notice-bar class="notice-bar" :text="noticeTitle"></up-notice-bar>
		<view class="introduce">景点介绍</view>
		<view class="list">
			<up-waterfall v-model="homeFlowList" ref="uWaterfallRef">
				<template v-slot:left="{leftList}">
					<view class="demo-water" v-for="(item, index) in leftList" :key="index">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="item.img"
							:index="index"></up-lazy-load>
						<view class="description-container">
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-times">{{item.times}}</view>
							<view class="demo-tag">
								<text class="demo-tag-text-1">{{ item?.tag[0] }}</text>
								<text class="demo-tag-text-2">{{ item?.tag[1] }}</text>
							</view>
						</view>
						<view v-if="item.dot" class="demo-decommand">
							<text>{{item.isDot}}</text>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-water" v-for="(item, index) in rightList" :key="index">
						<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
						<up-lazy-load threshold="-450" border-radius="10" :image="item.img"
							:index="index"></up-lazy-load>
						<view class="description-container">
							<view class="demo-title">
								{{item.title}}
							</view>
							<view class="demo-times">{{item.times}}</view>
							<view class="demo-tag">
								<text class="demo-tag-text-1">{{ item?.tag[0] }}</text>
								<text class="demo-tag-text-2">{{ item?.tag[1] }}</text>
							</view>
						</view>
						<view v-if="item.dot" class="demo-decommand">
							<text>{{item.isDot}}</text>
						</view>
					</view>
				</template>
			</up-waterfall>
		</view>
	</view>
	<view v-if="showTopBtn" @click="gotoTop" class="srollBtn">
		<up-icon name="arrow-upward" size="30" color="#fff"></up-icon>
	</view>

</template>

<script setup>
	// 在uniapp中，使用Vue3语法导入uniapp生命周期函数
	import {
		onLoad,
		onReachBottom, //uniapp的触底钩子函数
		onPageScroll  // 监听页面滚动钩子函数
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		computed
	} from "vue";


	import {
		getBannerList
	} from "@/api/banner/bannerApi";
	import {
		getHomeList
	} from "@/api/home/homeApi";


	const noticeTitle = ref("项目公告：uniapp夸多端项目即将上线.....");
	const bannerList = ref([]);
	const keyword = ref("");
	const showTopBtn= ref(false);

	//首页列表数据
	const homeFlowList = ref([]);


	const bannerLenGtZero = computed(() => bannerList.value.length);

	//console.log('bannerLenGtZero=',bannerLenGtZero);
	onLoad(async () => {

		// 获取banner数据
		const res = await getBannerList();
		bannerList.value = res.bannerList;

		const homeRes = await getHomeList();
		homeFlowList.value = homeRes.homeList;

	});
	
	//触底时获取后端数据
	onReachBottom(()=>{
		console.log('触底了');
		setTimeout(async()=>{
			const homeRes = await getHomeList();
			homeFlowList.value.push(...homeRes.homeList);
			console.log(homeFlowList.value)
		},500);
	})
	
	//监听屏幕滚动的距离
	onPageScroll((e)=>{
		
		//滚动的距离超过500时，出现导航按钮
		if(e.scrollTop>500) {
			showTopBtn.value=true;
		}
		else{
			showTopBtn.value=false;
		}
	})
	
	const gotoTop = ()=>{
		uni.pageScrollTo({
			scrollTop:0,
			duration:200
		})
	}
	
	
</script>

<style lang="scss">
	@mixin paddingText {
		padding: 4rpx 14rpx;
		border-radius: 10rpx;
	}
	@mixin marginOffset {
		margin: 30px 0;
	}
	
	.srollBtn {
		position: fixed;
		right:30rpx;
		bottom:120rpx;
		background-color: #000;
		opacity: .5;
		display:flex;
		justify-content: center;
		align-items: center;
		padding:20rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		
	}

	.content {
		padding: 20rpx 20rpx;
	}

	.swiperContainer,.notice-bar {
		margin: 30rpx auto;
	}
	
	.introduce {
		margin: 20rpx 0 0;
		font-size:30rpx;
		padding:0 0 0 14rpx;
		
	}

	.list {

		.demo-water {
			margin: 10rpx 10rpx 10rpx 0;
			background: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			position:relative;
			.description-container {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.demo-title {
					font-size: 20rpx;
					font-weight: bold;
				}

				.demo-times {
					font-size: 20rpx;
					margin: 10rpx 0;
				}

				.demo-tag {
					background: #fff;
					font-size: 16rpx;

					.demo-tag-text-1 {
						border: 1px solid #ffaa00;
						@include paddingText;

					}

					.demo-tag-text-2 {
						margin-left: 10rpx;
						border: 1px solid #00aaff;
						@include paddingText;
					}
				}
			}
			.demo-decommand {
				position:absolute;
				top:20rpx;
				right:20rpx;
				background:#ff0000;
				color:#fff;
				font-size:16rpx;
				border-radius: 20%;
				padding:4rpx 10rpx;
				line-height: 24rpx;
				text-align: center;
				
			}
		}
	}
</style>